<template>
	<div class="outer_resume">
		<div class="resume">
			<div class="who">{{personinfor[0]}}</div>
			<!-- 基本信息 -->
			<div class="infor">
				<li>基本信息: <span>{{personinfor[1]}}</span>|<span>{{personinfor[6]}}毕业生</span></li>
				<li>最高学历: <span>{{personinfor[3]}}</span></li>
				<li>毕业院校: <span>{{personinfor[4]}}</span></li>
				<li>联系电话: <span>{{personinfor[7]}}</span></li>
				<li>电子邮箱: <span>{{personinfor[8]}}</span></li>
			</div>
			<img :src="personinfor[1]=='男'?'images/men.png':'images/women.png'" alt="">
			 <div class="title">教育背景</div>
			<div class="hr"></div>
			<!-- 教育经历 -->
			<div class="education">
				<div class="edu" v-for="(val,ind) in resumes[this.page].educations">
					<div>
						<li>{{val.time}}</li>
						<li>{{val.school}}</li>
						<li>{{val.major}}</li>
						<li>{{val.grade}}</li>
					</div>
					<p>{{val.about}}</p>
				</div>
			</div>
			<!-- 工作经历 -->
			<div class="title">工作经历</div>
			<div class="hr"></div>
			<div class="work">
				<div class="edu" v-for="(val,ind) in resumes[this.page].works">
					<div>
						<li>{{val.time}}</li>
						<li>{{val.company}}</li>
						<li>{{val.type}}</li>
						<li>{{val.position}}</li>
					</div>
					<p>{{val.about}}</p>
				</div>
			</div>
			
			
			<!-- 项目、比赛 -->
			<div class="title">参与项目/参与比赛</div>
			<div class="hr"></div>
			<div class="match">
				<div class="edu" v-for="(val,ind) in resumes[this.page].matchs">
					<div>
						<li>{{val.time}}</li>
						<li>{{val.name}}</li>
						<li>{{val.type}}</li>
						<li>{{val.position}}</li>
					</div>
					<p>{{val.about}}</p>
				</div>
			</div>
			
			<!-- 获得荣誉 -->
			<div class="title">获得荣誉</div>
			<div class="hr"></div>
			<div class="honor">
				<div class="edu" v-for="(val,ind) in resumes[this.page].honors">
					<div>
						<li>{{val.time}}</li>
						<li>{{val.name}}</li>
					</div>
					<p>{{val.about}}</p>
				</div>
			</div>
			
			<!-- 自我介绍 -->
			<div class="title">自我评价</div>
			<div class="hr"></div>
			<div class="edu" style="min-height: 50px;">
				<p>{{resumes[this.page].talk[0].about}}</p>
			</div>
		</div>
	</div>
</template>

<script>
import {mapState} from 'vuex'
export default{
	name:'Show',
	data(){
		return{
			page:this.$route.params.id
		}
	},
	computed:{
		...mapState(['resumes','personinfor'])
	},
	mounted() {
		console.log("这是第"+(parseInt(this.page)+1)+"份简历")
	}
}
</script>

<style scoped lang="less">
.outer_resume{
	position: relative;
	width: 750px;
	min-height: 70vh;
	margin: auto;
	text-align: left;
	user-select: none;
	.resume{
		width: 720px;
		padding: 60px 70px;
		border-radius: 10px;
		background-color: #fff;
	}
	p{padding-left: 100px;font-size: 12px; color: #888;}
	.who{
		font-size: 2.5rem;
		font-weight: 700;
		padding-bottom: 20px;
	}
	// 个人信息
	img{
		position: absolute;
		top: 130px;
		right: 20px;
		width: 100px;
		height: 105px;
	}
	.infor{
		position: relative;
		width: 75%;
		border: 1px solid #fff;
		div{
			position: absolute;
			top: 0;
			width: 100%;
			color: #fff;
			font-size: 16px;
			text-align: center;
			line-height: 135px;
		}
		div:hover{
			color: #047aff;
		}
		li{
			font-size: 14px;
			line-height: 27px;
			color: #222;
			span{
				padding: 0 10px;
				color: #666;
			}
		}
	}
	.title{
		margin:10px 0 10px 0;
		text-align: left;
		font-size: 16px;
		font-weight: 700;
		color: #223;
	}
	.hr{
		width: 100%;
		height: 0px;
		border-bottom: 1px solid #444;
	}
	.edu{
		position: relative;
		min-height: 60px;
		margin-top: 4px;
		padding: 10px 4px;
		padding-bottom: 10px;
		border: 1px dashed #fff;
		div{
			display: flex;
			justify-content: space-between;
			font-weight: 700;
			color: #222;
			font-size: 12px;
			li{
				width: 25%;
				padding-bottom: 10px;
			}
		}
		.hov{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 9;
		}
	}
}
</style>
